import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { SearchTagMock } from './mock'
import { Link } from 'react-router-dom'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import BaseLayout from '../../_Layout/BaseLayout'
import { SearchService } from '../../../transfer/service/SearchService'

interface ISearchTagProps {
    searchValue: string
}

export default function SearchTag(props: ISearchTagProps) {
    const [searchTag, setSearchTag] = useRecoilState(SearchTagMock)
    const [count, setCount] = useState<number>()

    // 初始化数据
    useEffect(() => {
        new SearchService().get('tags', props.searchValue, 0, 20).then(res => {
            setSearchTag(res.data.data)
            setCount(res.data.data.length)
        })
    }, [])

    // 初始化布局/自适应布局
    useEffect(() => {
        const listWarp = $(`.${style.content}`)
        let listWidth = (document.querySelector(`.${style.content}`) as any).scrollWidth
        let start_scroll_top: number | undefined = 0
        let end_scroll_top = listWarp.scrollLeft()
        if (count! > 6) {
            $('#ctl__btn__right').addClass('active')
        }
        listWarp.on('scroll', () => {
            end_scroll_top = listWarp.scrollLeft()
            if (start_scroll_top! > 0) {
                $('#ctl__btn__left').addClass('active')
            }
            if (end_scroll_top! <= 0) {
                $('#ctl__btn__left').removeClass('active')
            }
            if (end_scroll_top! <= listWidth - listWarp.innerWidth()! - 1) {
                $('#ctl__btn__right').addClass('active')
            }
            if (end_scroll_top! > listWidth - listWarp.innerWidth()! - 1) {
                $('#ctl__btn__right').removeClass('active')
            }
            start_scroll_top = listWarp.scrollLeft()
        })
    }, [count])

    useEffect(() => {
        if (count == 0) $(`.${style.list}`).addClass('hide')
        else $(`.${style.list}`).removeClass('hide')
    }, [count])

    const handleBtnCtlClick = (type: string) => {
        const listWarp = $(`.${style.content}`)
        let toLeft = listWarp.scrollLeft()
        if (type == 'left') {
            listWarp.animate({ scrollLeft: (toLeft! -= 200) }, 500)
        } else {
            listWarp.animate({ scrollLeft: (toLeft! += 200) }, 500)
        }
    }

    return (
        <BaseLayout>
            <div className={style.container}>
                <span>{props.searchValue.replace(/[-]+/g, ' ')}</span>
                <div className={style.list}>
                    <div
                        id="ctl__btn__left"
                        className={`${style.list__ctl__btn} ${style.ctl__btn__left}`}
                        onClick={() => {
                            handleBtnCtlClick('left')
                        }}>
                        <LeftOutlined />
                    </div>
                    <div
                        id="ctl__btn__right"
                        className={`${style.list__ctl__btn} ${style.ctl__btn__right}`}
                        onClick={() => {
                            handleBtnCtlClick('right')
                        }}>
                        <RightOutlined />
                    </div>
                    <div className={style.content}>
                        {searchTag.map((item, index) => {
                            return (
                                <div className={style.item} key={index}>
                                    <Link to={'/search/photos/' + item.title}>{item.title}</Link>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>
        </BaseLayout>
    )
}
